<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="css/basic_12.css" />
	<script type="text/javascript" src="js/jquery-1.7.1.min.js" charset="utf-8"></script>
	<style>
		.page2 .participant .item{width: 13.8%; margin-right:6.2%;}
	</style>
  </head>
  
  <body>
    <div class="main">
    	<div id="page0" style="width:100%; height: 100%; background: #ffffff; position: absolute; top: 0; left: 0; z-index: 1001;">
    	</div>
    	<div id="page1" class="page1">
    		<div class="head">
    			<div id="head_bg" class="head_bg"></div>
    			<div id="head_font" class="font1" style="text-align: center;">${poster.activitytheme }</div>
    		</div>
    		<img id="homeImg" src="${poster.posterurl }" class="homeImg"/>
    		<div class="bottom">
    			<div id="bottom_bg" class="bottom_bg"></div>
    			<img id="bottom_img" src="images/top.png"/>
    		</div>
    	</div>
    	<div id="page2" class="page2">
    		<div class="head">
    			<img id="headBtn" src="images/arrow.png" style="width: 7.5%;" onclick="scrollUp()"/>
    			<div class="praise" style="height: 2.0em;">
    				<img src="images/praise_bg.png" class="praise_bg" style="width: 5.0em; height: 2.0em;"/>
    				<div class="praise_font"style="font-size: 1.8em; line-height: 1.2em;">${poster.praiseCount }</div>
    			</div>
    			<img src="images/praise.png" class="praise_img" style="width: 3.8em;"/>
    		</div>
    		<div id="page2HeadSpace" class="spaceLine"></div>
   			<div class="title" style="width: 88%; padding-right: 6%;">${poster.activitytheme }</div>
   			<div class="tag">
   				<div class="imgDiv"><img src="images/time.png" /></div>
    			<div class="font">${poster.activitydate }</div>
    			<div class="clear"></div>
   			</div>
   			<div class="tag">
   				<div class="imgDiv"><img src="images/place.png" /></div>
    			<div class="font">${poster.address }</div>
    			<div class="clear"></div>
   			</div>
   			<div class="tag">
   				<div class="imgDiv"><img src="images/tag.png" /></div>
    			<div class="font">${poster.label }</div>
    			<div class="clear"></div>
   			</div>
    		<div class="solidLine"></div>
    		<div class="infoTitle">活动详情</div>
    		<div class="info">
    			${poster.content } 
    		</div>
    		<div class="solidLine2"></div>
    		<div class="message">
    			<div class="message_t">留言（${poster.commentlist.totalCount }）</div>
    			
    			<c:forEach var="obj" items="${poster.commentlist.comments }">
    				<div class="item">
    				<img src=${obj.sendUserImg } class="faceImg"/>
    				<div class="msg">
    					<div class="name">${obj.userName }</div>
    					<div class="time"><fmt:formatDate value="${obj.time }" pattern='MM月dd日 HH:mm' /></div>
    					<div class="clear"></div>
    					<div class="content">${obj.content }</div>
    				</div>
    				<div class="clear"></div>
    			</div>
    			</c:forEach>
    			
    		</div>
    		<div class="solidLine2"></div>
    		<div class="participant">
    			<div class="participant_t">参加（${poster.praiseCount }）</div>
    			
    			<c:forEach var="obj" items="${poster.join }">
    				<div class="item">
    				<img src="${obj.headImg }" class="faceImg"/>
    				<div class="name">${obj.nickname }</div>
    			</div>
    			</c:forEach>
    			
    			<div class="clear"></div>
    		</div>
    		<div class="spaceLine"></div>
    		<div class="bottom">
    			<img src="images/bottom.png"/>
    			<a href="http://d.91.com/Soft/Android/com.jingheng.thb-103.html">
    				<img id="download_btn" src="images/bottom_btn.png" class="download"/>
    			</a>
    		</div>
    	</div>
    </div>
  </body>
</html>
<script type="text/javascript">
var isMove = false;
var touchY = 0;
$(document).ready(function(){
	var h = $(window).height();
	$("#page0").height(h);
});
$(window).load(function(){
	var w = $(window).width();
	var h = $(window).height();
	$("#page1").height(h);
	var head_fontH = $("#head_font").height();
	var head_fontMH = $("#head_font").css("min-height").replace("px","");
	if(head_fontMH < head_fontH){
		$("#head_font").attr("class", "font2");
		head_fontH = $("#head_font").height();
	}
	var head_fontPH = $("#head_font").css("padding-top").replace("px","");
	$("#head_bg").height(head_fontH + head_fontPH * 2);
	var bottom_imgH = $("#bottom_img").height();
	var bottom_imgPH = $("#bottom_img").css("padding-top").replace("px","");
	$("#bottom_bg").height(bottom_imgH + bottom_imgPH * 2);
	var imgW = $("#homeImg").width();
	var imgH = $("#homeImg").height();
	if(w/h < imgW/imgH){
		$("#homeImg").css("width", w);
		$("#homeImg").css("height", "auto");
		imgH = $("#homeImg").height();
		$("#homeImg").css("margin-top", (h - imgH)/2);
	}else{
		$("#homeImg").css("width", "auto");
		$("#homeImg").css("height", h);
		imgW = $("#homeImg").width();
		$("#homeImg").css("margin-left", (w - imgW)/2);
	}
	$("#page0").hide();
    document.getElementById("page1").addEventListener('touchstart', touchStart);  
    document.getElementById("page1").addEventListener('touchmove', touchMove); 
    document.getElementById("page1").addEventListener('touchend', touchEnd);
     
    $("#bottom_img").bind("touchstart", function(){
		scrollDown();
	});
	
});

//滑动开始事件  
function touchStart(e) {  
    isMove = true;  
    e.preventDefault(); 
    touchY = e.touches[0].pageY;  
}  

function touchMove(e){  
    if(isMove){  
        e.preventDefault();  
        var touchY2 = e.touches[0].pageY; 
 		if(touchY - touchY2 > 20){
 			isMove = false;
 			document.getElementById("page1").removeEventListener('touchstart', touchStart);  
    	 	document.getElementById("page1").removeEventListener('touchmove', touchMove); 
     		document.getElementById("page1").removeEventListener('touchend', touchEnd);
 			scrollDown();
 		}
    }  
}

function touchEnd(e){  
    isMove = false;   
}

function scrollDown(){ 
	$("#page2").show();
	$("#page2").each(function(){
		var headH = $(this).find(".head").height();
		var headPH = $(this).find(".head").css("padding-top").replace("px","");
		$(this).find("#page2HeadSpace").height(headH + headPH * 2);
		var download_btnH = $(this).find("#download_btn").height();
		$(this).find("#download_btn").css("margin-top", -download_btnH/2);
		var w = $(window).width();
		$(".tag").each(function(){
			var tagW = w * 0.92;
			var imgW = $(this).find(".imgDiv").width();
			var fontLeftW = tagW * 0.03;
			var fontW = tagW - imgW - fontLeftW - 5;
			$(this).find(".font").width(fontW);
		});
		$(".message .item").each(function(){
			var itemW = w * 0.92;
			var imgW = $(this).find(".faceImg").width();
			var msgLeftW = itemW * 0.04;
			var msgW = itemW - imgW - msgLeftW;
			var timeW = $(this).find(".time").width();
			var nameW = msgW - timeW - 10;
			$(this).find(".msg").width(msgW);
			$(this).find(".name").width(nameW);
		});
	});
	
	$("#page1").find(".head").css("position","absolute");
	$("#page1").find(".bottom").css("position","absolute");
	var h = $("#page1").height();
	$("html,body").animate({scrollTop: h+"px"},600,function(){
		$("#page2").find(".head").css("position","fixed");
		$("#page2").find(".bottom").css("position","fixed");
		$("#page1").hide();
		$("html,body").scrollTop(0);
	}); 
}
function scrollUp(){ 
	$("#page1").show();
	var h = $("#page1").height();
	$("#page2").find(".head").css("position","absolute");
	$("#page2").find(".bottom").css("position","absolute");
	var page2ScrollTop = $("html,body").scrollTop(); 
	var top = h + page2ScrollTop;
	$("html,body").scrollTop(top);
	$("html,body").animate({scrollTop: "0px"},600,function(){ 
		$("#page1").find(".head").css("position","fixed");
		$("#page1").find(".bottom").css("position","fixed");
		$("#page2").hide();
	}); 
	document.getElementById("page1").addEventListener('touchstart', touchStart);  
    document.getElementById("page1").addEventListener('touchmove', touchMove); 
    document.getElementById("page1").addEventListener('touchend', touchEnd);
}
</script>
